<template>
  <view class="diy-special" style="padding: 0; height: 50px">
    <view class="special-left">
      <image class="image" mode="heightFix" src="@/static/tz.png" />
    </view>
    <view class="special-content" style="height: 100%">
      <swiper
        v-if="ggList && ggList.length"
        :autoplay="true"
        :interval="3500"
        :duration="800"
        :circular="true"
        :vertical="true"
      >
        <swiper-item v-for="(dataItm, idx) in ggList" :key="idx">
          <view
            class="oneline-hide"
            style="padding: 28rpx 0"
            @click.stop.prevent="handleNavDetail(dataItm.id)"
          >
            <text>{{ dataItm.title }}</text>
          </view>
        </swiper-item>
      </swiper>
      <view v-else class="special-slot">
        <slot></slot>
      </view>
    </view>
    <view class="special-more">
      <u-icon name="/static/more.png" size="24" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'Special',
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    ggList: Array
  },
  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    // 跳转到文章详情页
    handleNavDetail(articleId) {
      uni.navigateTo({
        url: `/other/article/detail?articleId=` + articleId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// diy-头条快报
.diy-special {
  background: white;
  margin: 0 20rpx 20rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;

  .special-left {
    padding: 10rpx 20rpx;

    .image {
      display: block;
      height: 30rpx;
    }
  }

  .special-content {
    flex: 1;
    overflow: hidden;
    font-size: 32rpx;
    color: #141414;

    .special-slot {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .special-more {
    padding: 24rpx 20rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
  }
}
</style>
